import React, { PureComponent } from 'react';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import {
  Card,
  Table,
  Divider,
  Popconfirm,
  Form,
  Select,
} from 'antd';
import moment from 'moment';
import { Link } from 'dva/router';
import CardModal from './CardModal';
import { connect } from 'dva';
import styles from './People.less';
const FormItem = Form.Item;
const Option = Select.Option;
@connect(({ card, loading }) => ({
  card: card.currentCard,
  cardLoading: loading.effects['card/getCardlist'],
}))
@Form.create()
export default class Readcard extends PureComponent {
  state = {
    visible: false,
    formValues: {},
  };
  componentWillMount() {
    //列表
    const { dispatch } = this.props;
    dispatch({
      type: 'card/getCardlist',
    });
  }
  deleteHandler = id => {
    //删除
    const { dispatch } = this.props;
    dispatch({
      type: 'card/remove',
      payload: id,
    });
  };
  handleSearch = e => {
    e.preventDefault();
    const { dispatch, form } = this.props;
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      const values = {
        ...fieldsValue,
        updatedAt: fieldsValue.updatedAt && fieldsValue.updatedAt.valueOf(),
      };
      if (values.register_date) {
        values.register_date = moment(values.register_date).format('YYYY-MM-DD');
      }
      this.setState({
        formValues: values,
      });
      dispatch({
        type: 'card/fetch',
        payload: values,
      });
    });
  };
  render() {
    const { getFieldDecorator } = this.props.form;
    const { card, cardLoading } = this.props;
    const columns = [
      {
        title: '文章题目',
        dataIndex: 'card_deposit',
        key: 'card_deposit',
      },
      {
        title: '发布城市',
        dataIndex: 'register_source',
        key: 'register_source',
      },
      {
        title: '过期时间',
        dataIndex: 'cancel_card_date',
        key: 'cancel_card_date',
      },
      {
        title: '文章内容',
        dataIndex: 'card_type',
        key: 'card_type',
      },
      {
        title: '操作',
        key: 'action',
        width: 180,
        fixed: 'right',
        render: (text, record) => (
          <span>
            <Link to={'/people/carddetail/' + record.id}>
              <a>查看</a>
            </Link>
            <Divider type="vertical" />
            <Divider type="vertical" />
            <Popconfirm title="确定删除？" onConfirm={this.deleteHandler.bind(null, record.id)}>
              <a href="">删除</a>
            </Popconfirm>
          </span>
        ),
      },
    ];
    return (
      <PageHeaderLayout
        title="文章列表"
        content="文章列表页是数据项基本的全面信息场景。"
      >
        <Card bordered={false}>
          <div className={styles.tables}>
            <Table
              columns={columns}
              dataSource={card}
              loading={cardLoading}
              pagination={{
                showSizeChanger: true,
                showQuickJumper: true,
                pageSize: 8, //每页5条数据
                total: 50,
                total: card.total,
                showTotal: total => `共 ${total} 条数据`,
              }}
              rowKey="id"
              scroll={{ x: 1300 }} //自然滚动
            />
          </div>
        </Card>
      </PageHeaderLayout>
    );
  }
}
